<!--
 * @Description: 供应商表单弹窗
-->
<template>
  <a-drawer :title="formTitle" :open="visible" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ sm: 4, lg: 6 }">
      <a-card title="基本信息" class="smart-margin-bottom10">
        <a-row :gutter="{ sm: 8, md: 16, lg: 24 }">
          <a-col :span="21">
            <a-row :gutter="{ sm: 8, md: 16, lg: 24 }">
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="名称" name="name">
                  <a-input v-model:value="form.name" placeholder="请输入名称" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="简称" name="short_name">
                  <a-input v-model:value="form.short_name" placeholder="请输入简称" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="税号" name="tax_no">
                  <a-input v-model:value="form.tax_no" placeholder="请输入税号" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="税率" name="tax_rate">
                  <a-input v-model:value="form.tax_rate" placeholder="请输入税率" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="营业执照编号" name="license_no">
                  <a-input v-model:value="form.license_no" placeholder="请输入营业执照编号" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="负责人" name="contact">
                  <a-input v-model:value="form.contact" placeholder="请输入负责人" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="联系电话" name="phone">
                  <a-input v-model:value="form.phone" placeholder="请输入联系电话" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
                <a-form-item label="地址" name="address">
                  <a-input v-model:value="form.address" placeholder="请输入地址" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="3">
            <a-col :xs="24" :lg="12" :xl="8" :xxl="8">
              <a-form-item label="" name="logo">
                <FileUpload v-model:value="form.logo" :default-file-list="form.logo" buttonText="上传logo" :maxUploadSize="1" :maxSize="1" accept=".jpeg,.jpg,.png" />
              </a-form-item>
            </a-col>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
    <template #footer>
      <div class="smart-table-operate-block">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup lang="ts">
import { ref, unref, computed, nextTick } from 'vue'
import _ from 'lodash'
import { message } from 'ant-design-vue'
import { useLoadingStore } from '@/store/modules/loading-store'
import FileUpload from '@/components/support/file-upload/index.vue'
import { errorSentry } from '@/lib/error-sentry'
import DealerSelect from '@/components/business/select/dealer-select.vue'
import { supplierApi } from '@/api/business/data/supplier-api'
const loadingStore = useLoadingStore()
// emit
const emit = defineEmits(['reload-list'])

// 组件ref
const formRef = ref()

const formDefault = {
  // 名称
  name: '',
  // 简称
  short_name: '',
  // 税号
  tax_no: '',
  // 税率
  tax_rate: '',
  // 营业执照
  license_no: '',
  // 负责人
  contact: '',
  // 联系电话
  phone: '',
  // 地址
  address: '',
  // Logo
  logo: ''
}

const form = ref({ ...formDefault })
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur'
    }
  ]
}
// 是否展示抽屉
const visible = ref(false)

function showDrawer(rowData) {
  form.value = _.cloneDeep(formDefault)
  if (rowData && !_.isEmpty(rowData)) {
    form.value = _.pick(rowData, ['id', ...Object.keys(formDefault)])
  }
  visible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

function onClose() {
  form.value = formDefault
  visible.value = false
}

function onSubmit() {
  formRef.value
    .validate()
    .then(async () => {
      loadingStore.show()
      try {
        if (unref(form).id) {
          await supplierApi.editSupplier(unref(form))
        } else {
          await supplierApi.addSupplier(unref(form))
        }
        message.success('操作成功')
        onClose()
        emit('reload-list')
      } catch (error) {
        message.error(error.msg)
        errorSentry.captureError(error)
      } finally {
        loadingStore.hide()
      }
    })
    .catch((error) => {
      console.log('error', error)
      message.error('参数验证错误，请仔细填写表单数据!')
    })
}

defineExpose({
  showDrawer
})

// 表单标题
const formTitle = computed(() => (form.value.id ? '编辑' : '新增'))
</script>
